<template>
<div class="task-pool-container">
    <a-page-header :ghost="ghost" title="任务池" sub-title="哈哈哈哈" >
        <template #extra>
            <a-button style="background-color: green; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);" @click="addTask">提交更改</a-button>
        </template>
    </a-page-header>
    <hr/>
    <!-- 按钮区 -->
    <div class="task-pool-button">
        <a-space>
            <a-button type="primary" @click="export">导出</a-button>
            <a-button type="primary" @click="editTask">新增临时任务</a-button>
        </a-space>
    </div>
    <hr/>
    <div class="task-tab-button">
    <!-- 标签页按钮区 -->
    <a-space direction="vertical">
        <a-radio-group v-model:value="size">
            <a-radio-button value="large">所有任务</a-radio-button>
            <a-radio-button value="default">日常性任务</a-radio-button>
            <a-radio-button value="small">一次性任务</a-radio-button>
            <a-radio-button value="small">目标性任务</a-radio-button>
            <a-radio-button value="small">复杂型任务</a-radio-button>
            <a-radio-button value="small">其他</a-radio-button>
        </a-radio-group>
    </a-space>
    </div>
    <div>
        <a-row>
            <a-col :span="12" v-for="task in tasks" :key="task.id">
                <TaskCard :task="task" @carddrag="handleDragStart" ref="taskCardRef"  draggable="true" class="pool-task-card"/>
            </a-col>
        </a-row>
    </div>
    <!-- 任务容纳区 -->
</div>
</template>

<script setup>

import { onMounted,ref } from 'vue';
import TaskCard from './TaskCard.vue';
import { getAllTaskByUserId } from '../api/task';
const emit = defineEmits(['taskpool-task-drag']);

const tasks=ref([]);
onMounted(() => {
  getAllTaskByUserId().then((res) => {
    tasks.value = res.data;
    console.log('tasks:', tasks.value);
  });
});
//处理拖拽任务卡
const handleDragStart = (dragTask) => {
    //通知到更上一层
    emit('taskpool-task-drag', dragTask); // 触发自定义事件，通知父组件任务开始拖拽
};

//父组件会调用这个方法
const removeTask = (taskId) => {
  const index = tasks.value.findIndex((task) => task.id === taskId);
  if (index !== -1) {
    tasks.value.splice(index, 1); // 从任务池中移除任务
  }
};

</script>
<style scoped>
.task-pool-container{
    min-height:500px ;
    min-width: 150px; /* 最大宽度限制为 800px，适配大屏幕 */
    width: 100%; /* 宽度自适应 */
    margin-top: 20px;
    margin-left:10px;
    margin-right: 10px;
    padding-right: 0px;
    border-radius: 4px; /* 圆角边框，半径为 16px */
    overflow: hidden; /* 隐藏超出容器的内容，确保圆角效果完整 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 添加阴影，提升立体感 */
}
.task-pool-button{
    margin-left: 20px;
    display: flex;
    align-items: left;
}
.task-tab-button{
    margin-top: 5px;
    margin-left:20px ;
    display: flex;
    align-items: left;
}
</style>
